.matrixHighlights {
    /* So that we don't get spurious mouseLeave events when a highlight rect
     * pops up on top of a wordrect. */
    pointer-events: none;
}

rect.focalBlock, rect.alley {
    fill: rgb(215, 235, 255);
}

.focalBlock.primary, .focalBlock.primary-maindiag {
    fill-opacity: .9;
}

.focalBlock.incidental {
    fill-opacity: .5;
}

rect.alley {
    fill-opacity: .3;
}

.alley.lyrics-alley {
    fill-opacity: 1;
}

rect.wordrect {
    stroke: aqua;
    /** Depending on the amount of text and the size of the viewport, individual
     * rects can end up being really small, and hovering over them (and remaining
     * there) turns into a very finnicky affair. This helps with that by adding
     * some invisible padding around each rect. */
    stroke-width: 1.5;
    stroke-opacity: 0;
}


svg.matrix {
    background-color: white;
    border: black;
    border-style: solid;
    border-width: 1px;
    cursor: crosshair;
}

